<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    width="30%"
    @close="handleClose"
  >
    <div class="device-controls">
      <div v-for="device in roomDevices" :key="device.id" class="device-item">
        <div class="device-header">
          <span class="device-name">{{ device.name }}</span>
          <el-switch
            v-model="device.status"
            @change="(val) => handleStatusChange(device.id, val)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
          <el-button 
            type="danger" 
            circle 
            size="small"
            class="delete-btn"
            @click="handleDelete(device.id)"
          >
            <el-icon><Delete /></el-icon>
          </el-button>
        </div>
        
        <!-- 亮度调节 -->
        <div v-if="device.type === 'light'" class="control-item">
          <span class="label">亮度调节</span>
          <div class="control-value">
            <el-input-number 
              v-model="device.brightness" 
              :min="0" 
              :max="100"
              @change="(val) => handleBrightnessChange(device.id, val)"
            />
          </div>
        </div>

        <!-- 空调控制 -->
        <div v-if="device.type === 'ac'" class="control-group">
          <div class="control-item">
            <span class="label">温度设置</span>
            <div class="control-value">
              <el-input-number 
                v-model="device.temperature" 
                :min="16" 
                :max="30"
                @change="(val) => handleTemperatureChange(device.id, val)"
              />
            </div>
          </div>
          <div class="control-item">
            <span class="label">模式选择</span>
            <div class="control-value">
              <el-select 
                v-model="device.mode"
                @change="(val) => handleModeChange(device.id, val)"
              >
                <el-option label="制冷" value="cool" />
                <el-option label="制热" value="heat" />
                <el-option label="自动" value="auto" />
                <el-option label="除湿" value="dry" />
              </el-select>
            </div>
          </div>
          <div class="control-item">
            <span class="label">风速调节</span>
            <div class="control-value">
              <el-select 
                v-model="device.fanSpeed"
                @change="(val) => handleFanSpeedChange(device.id, val)"
              >
                <el-option label="自动" value="auto" />
                <el-option label="低速" value="low" />
                <el-option label="中速" value="medium" />
                <el-option label="高速" value="high" />
              </el-select>
            </div>
          </div>
        </div>

        <!-- 窗帘控制 -->
        <div v-if="device.type === 'curtain'" class="control-item">
          <span class="label">开合度调节</span>
          <div class="control-value">
            <el-input-number 
              v-model="device.openness" 
              :min="0" 
              :max="100"
              @change="(val) => handleOpennessChange(device.id, val)"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="dialog-footer">
      <el-button type="primary" @click="handleAddDevice">添加设备</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { Delete } from '@element-plus/icons-vue'

export default {
  name: 'DeviceControlDialog',
  components: {
    Delete
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    room: {
      type: String,
      required: true
    }
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const store = useStore()
    const dialogVisible = computed({
      get: () => props.visible,
      set: (value) => emit('update:visible', value)
    })

    const title = computed(() => `${props.room} - 设备控制`)

    // 获取当前房间的设备列表
    const roomDevices = computed(() => {
      return store.getters.devicesByRoom(props.room)
    })

    // 处理设备状态改变
    const handleStatusChange = (deviceId, value) => {
      store.dispatch('toggleDevice', { deviceId, status: value })
    }

    // 处理亮度改变
    const handleBrightnessChange = (deviceId, value) => {
      store.dispatch('updateDeviceSetting', {
        deviceId,
        setting: 'brightness',
        value
      })
    }

    // 处理温度改变
    const handleTemperatureChange = (deviceId, value) => {
      store.dispatch('updateDeviceSetting', {
        deviceId,
        setting: 'temperature',
        value
      })
    }

    // 处理空调模式改变
    const handleModeChange = (deviceId, value) => {
      store.dispatch('updateDeviceSetting', {
        deviceId,
        setting: 'mode',
        value
      })
    }

    // 处理风速改变
    const handleFanSpeedChange = (deviceId, value) => {
      store.dispatch('updateDeviceSetting', {
        deviceId,
        setting: 'fanSpeed',
        value
      })
    }

    // 处理窗帘开合度改变
    const handleOpennessChange = (deviceId, value) => {
      store.dispatch('updateDeviceSetting', {
        deviceId,
        setting: 'openness',
        value
      })
    }

    // 处理删除设备
    const handleDelete = (deviceId) => {
      store.dispatch('removeDevice', deviceId)
    }

    // 处理添加设备
    const handleAddDevice = () => {
      // 这里可以打开添加设备的对话框
      store.commit('setAddDeviceDialogVisible', true)
    }

    // 处理对话框关闭
    const handleClose = () => {
      dialogVisible.value = false
    }

    return {
      dialogVisible,
      title,
      roomDevices,
      handleStatusChange,
      handleBrightnessChange,
      handleTemperatureChange,
      handleModeChange,
      handleFanSpeedChange,
      handleOpennessChange,
      handleDelete,
      handleAddDevice,
      handleClose
    }
  }
}
</script>

<style scoped>
.device-controls {
  padding: 20px;
}

.device-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.device-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.device-name {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
}

.delete-btn {
  margin-left: 10px;
}

.control-group {
  margin-top: 15px;
}

.control-item {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.label {
  width: 80px;
  color: #606266;
}

.control-value {
  flex: 1;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style> 